var container = document.getElementById('container');
var wrap = document.getElementById('wrap');
var aBox = wrap.getElementsByTagName('div');
var audio = document.getElementById('audio');
var radius = calculateRadius(129,20);
for(var i=0;i<aBox.length; i++){
  console.log(i);
  aBox[i].style.background = 'url("../images/p'+(i+1)+'.png") no-repeat';
  aBox[i].style.WebkitTransform = 'rotateY('+360/aBox.length*i+'deg) translateZ('+radius+'px)';
}
function calculateRadius(length,totalNum){
  return Math.round(length/(2*Math.tan(Math.PI/totalNum)))-3;
}

$('#paly').on('click',function(e){
  _self = $(this);
  if(audio.paused){
    console.log($(this));
    audio.play();
    _self.text('🎺');
  }else{
    audio.pause();
    _self.text('⏸️ ');
  }
});

var startX=0;
var x = 0;
var endX = 0;
var flag = true;
$('#wrap').on('touchstart',function(event){
  event.preventDefault();
  console.log(event.touches[0]);
  var pageX = event.touches[0].pageX;
  startX = pageX - x;
});
$('#wrap').on('touchmove',function(event){
  event.preventDefault();
  if(flag){
   endX = event.touches[0].pageX;
   x = endX - startX ;
   wrap.style.transform = 'rotateY('+x+'deg)';
 }else{
   return false;
 }

});
$('#wrap').on('touchend',function(event){
  console.log('end---');
});
window.addEventListener('deviceorientation',function(event){
    var gamma = event.gamma;
    if(Math.abs(gamma) >1 ){
    wrap.style.transform = 'rotateY('+gamma * 3 +'deg)';
    flag = false;
  }else{
    flag = true;
  }

});
